<template>
  <div class="info-left">
<!--    <div class="info-head">-->
<!--      <div class="pdf-title">合同信息</div>-->
<!--      <div  class="pdf-info-btn">-->
<!--        <a-button type="link" @click="editClick">-->
<!--          <template #icon>-->
<!--            <EditOutlined />-->
<!--          </template>-->
<!--          编辑-->
<!--        </a-button>-->
<!--        <a-button :style="{margin: '0 10px'}" type="link" v-if="isEdit" @click="saveClick">-->
<!--          保存-->
<!--        </a-button>-->
<!--        <a-button type="link" v-if="isEdit" @click="cancelClick">-->
<!--          取消-->
<!--        </a-button>-->
<!--      </div>-->
<!--    </div>-->
    <div class="descriptions-box">
      <a-descriptions :column="1" :labelStyle="labelStyle">
        <a-descriptions-item label="合同名称">
          <span>{{formState.contractName}}</span>
        </a-descriptions-item>
        <a-descriptions-item label="合同编号">
          <span>{{formState.contractNumber}}</span>
        </a-descriptions-item>
        <a-descriptions-item label="补充合同原件" v-if="formState.status === 1">
          <a-button @click="showFileModel" class="border-btn">
            <template #icon>
              <UploadOutlined/>
            </template>
            点击上传
          </a-button>
        </a-descriptions-item>
        <a-descriptions-item label="关联主合同">
          <a-select  v-if="isEdit" :style="{width: '100%'}"
                    :fieldNames="{
                          label: 'contractName',
                          value: 'id'
                         }"
                    v-model:value="formState.mainContract"
                    placeholder="请选择关联主合同"
                    :options="allMainData" />
          <span class="clickTxt" :style="{color: '#0062AD'}" @click="goMain(formState.mainContract)" v-else>{{formState.mainContractName}}</span>
        </a-descriptions-item>
        <a-descriptions-item label="贸易模式">
          <a-radio-group v-if="isEdit" v-model:value="formState.tradeModel">
            <a-radio :value="1">采购</a-radio>
            <a-radio :value="2">销售</a-radio>
            <a-radio :value="3">返装销售</a-radio>
          </a-radio-group>
          <span v-else>
            <span v-for="item in modelAreas" :key="item.value">
              <span v-if="formState.tradeModel === item.value"> {{item.label}}</span>
            </span>
          </span>
        </a-descriptions-item>
        <a-descriptions-item label="贸易类型">
          <a-select v-if="isEdit" :style="{width: '100%'}"
                    v-model:value="formState.tradeType" placeholder="请选择贸易类型" :options="areas" />
          <span v-else>
            <span v-for="item in areas" :key="item.label">
              <span v-if="item.value === formState.tradeType">{{item.label}}</span>
            </span>
            </span>
        </a-descriptions-item>
        <a-descriptions-item label="贸易主体">
          <a-select v-if="isEdit" :style="{width: '100%'}" v-model:value="formState.tradeBody" placeholder="请选择贸易主体" :options="tradeareas" />
          <span v-else>
            <span v-for="item in tradeareas" :key="item.label">
              <span v-if="item.value === formState.tradeBody">{{item.label}}</span>
            </span>
            </span>
        </a-descriptions-item>
        <a-descriptions-item>
          <template v-slot:label>
            <span @click="searchPostion(OCRInfo.signingDateValLoc.name, OCRInfo.signingDateValLoc)" >合同签订日期</span>
          </template>
          <a-date-picker v-if="isEdit" :style="{width: '100%'}" v-model:value="formState['signingDate']"  value-format="YYYY-MM-DD" />
          <span v-else @click="searchPostion(OCRInfo.signingDateValLoc.filedValue, OCRInfo.signingDateValLoc)"> {{formState.signingDate}}</span>
        </a-descriptions-item>
        <a-descriptions-item>
          <template v-slot:label>
            <span @click="searchPostion(OCRInfo.buyerValLoc.name, OCRInfo.buyerValLoc)" >买方</span>
          </template>
          <a-input v-model:value="formState.buyer" placeholder="请输入买方" v-if="isEdit"></a-input>
          <span v-else @click="searchPostion(OCRInfo.buyerValLoc.filedValue, OCRInfo.buyerValLoc)">{{formState.buyer}}</span>
        </a-descriptions-item>
        <a-descriptions-item>
          <template v-slot:label>
            <span @click="searchPostion(OCRInfo.sellerValLoc.name, OCRInfo.sellerValLoc)" >卖方</span>
          </template>
          <a-input v-model:value="formState.seller" placeholder="请输入卖方" v-if="isEdit"></a-input>
          <span v-else @click="searchPostion(OCRInfo.sellerValLoc.filedValue, OCRInfo.sellerValLoc)"> {{formState.seller}}</span>
        </a-descriptions-item>
        <a-descriptions-item label="交货方式">
          <template v-slot:label>
            <span @click="searchPostion(OCRInfo.deliveryTypeValLoc.name, OCRInfo.deliveryTypeValLoc)" >交货方式</span>
          </template>
          <a-select v-if="isEdit" :style="{width: '100%'}" v-model:value="formState.deliveryType" placeholder="请选择交货方式" :options="wayareas" />
          <span v-else>
            <span v-for="item in wayareas" :key="item.label">
              <span v-if="item.value === formState.deliveryType" @click="searchPostion(OCRInfo.deliveryTypeValLoc.filedValue, OCRInfo.deliveryTypeValLoc)">{{item.label}}</span>
            </span>
            </span>
        </a-descriptions-item>
        <a-descriptions-item>
          <template v-slot:label>
            <span @click="searchPostion(OCRInfo.loadingPortValLoc.name, OCRInfo.loadingPortValLoc)" >装载港</span>
          </template>
          <a-input v-if="isEdit" v-model:value="formState.loadingPort" placeholder="请输入装载港"/>
          <span v-else @click="searchPostion(OCRInfo.loadingPortValLoc.filedValue, OCRInfo.loadingPortValLoc)"> {{formState.loadingPort}}</span>
        </a-descriptions-item>
        <a-descriptions-item>
          <template v-slot:label>
            <span @click="searchPostion('changePortTimeLoading')" >换港时间（装载港）</span>
          </template>
          <a-date-picker v-if="isEdit" :style="{width: '100%'}" v-model:value="formState['changePortTimeLoading']"  value-format="YYYY-MM-DD" />
          <a-dropdown placement="bottomLeft" v-else>
            <span @click="searchPostion(formState.changePortTimeLoading)">{{formState.changePortTimeLoading}}</span>
            <template #overlay>
              <a-menu>
                <a-menu>
                  <a-menu-item>本地时间：{{formState.changePortTimeLoading}}</a-menu-item>
                  <a-menu-item>GMT时间：{{timeData(formState.changePortTimeLoading, 'GMT')}}</a-menu-item>
                  <a-menu-item>北京时间：{{timeData(formState.changePortTimeLoading, 'beijin')}}</a-menu-item>
                </a-menu>
              </a-menu>
            </template>
          </a-dropdown>
        </a-descriptions-item>
        <a-descriptions-item>
          <template v-slot:label>
            <span @click="searchPostion(OCRInfo.unloadingPortValLoc.name, OCRInfo.unloadingPortValLoc)" >卸载港</span>
          </template>
          <a-input v-if="isEdit" v-model:value="formState.unloadingPort" placeholder="请输入卸载港"/>
          <span v-else @click="searchPostion(OCRInfo.unloadingPortValLoc.filedValue, OCRInfo.unloadingPortValLoc)"> {{formState.unloadingPort}}</span>
        </a-descriptions-item>
        <a-descriptions-item>
          <template v-slot:label>
            <span @click="searchPostion('changePortTimeUnloading')" >换港时间（卸载港）</span>
          </template>
          <a-date-picker v-if="isEdit" :style="{width: '100%'}" v-model:value="formState['changePortTimeUnloading']"  value-format="YYYY-MM-DD" />
          <a-dropdown placement="bottomLeft" v-else>
            <span @click="searchPostion(formState.changePortTimeUnloading)">{{formState.changePortTimeUnloading}}</span>
            <template #overlay>
              <a-menu>
                <a-menu-item>本地时间：{{formState.changePortTimeUnloading}}</a-menu-item>
                <a-menu-item>GMT时间：{{timeData(formState.changePortTimeUnloading, 'GMT')}}</a-menu-item>
                <a-menu-item>北京时间：{{timeData(formState.changePortTimeUnloading, 'beijin')}}</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </a-descriptions-item>
        <a-descriptions-item>
          <template v-slot:label>
            <span @click="searchPostion(OCRInfo.deliveryWindowValLoc.name, OCRInfo.deliveryWindowValLoc)" >交付窗口</span>
          </template>
          <a-range-picker :style="{width: '100%'}" v-if="isEdit" v-model:value="formState['deliveryWindows']"  :show-time="{ format: 'HH:mm' }" value-format="YYYY-MM-DD HH:mm" />

          <a-dropdown placement="bottomLeft" v-else>
            <span @click="searchPostion(OCRInfo.deliveryWindowValLoc.filedValue, OCRInfo.deliveryWindowValLoc)"> {{formState.deliveryWindow}}

            </span>
            <template #overlay>
              <a-menu>
                <a-menu-item>本地时间：{{`${formState.deliveryWindowBegin} - ${formState.deliveryWindowEnd}`}}</a-menu-item>
                <a-menu-item>GMT时间：{{`${timeData(formState.deliveryWindowBegin, 'GMT')} - ${timeData(formState.deliveryWindowEnd, 'GMT')}`}}</a-menu-item>
                <a-menu-item>北京时间：{{`${timeData(formState.deliveryWindowBegin, 'beijin')} - ${timeData(formState.deliveryWindowEnd, 'beijin')}`}}</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </a-descriptions-item>
        <a-descriptions-item>
          <template v-slot:label>
            <span @click="searchPostion(OCRInfo.loadingOrUnloadingCapacityValLoc.name, OCRInfo.loadingOrUnloadingCapacityValLoc)" >装/卸载量</span>
          </template>
          <div  v-if="isEdit" :style="{width: '100%'}">
            <a-input-number  v-model:value="formState.loadingOrUnloadingCapacity"
                             class="numipt1"
                              :min="1" >
              <template #addonAfter>
                <a-select  style="width: 87px" v-model:value="formState.unit">
                  <a-select-option :value="1">MMBtu</a-select-option>
                  <a-select-option :value="2">m³</a-select-option>
                  <a-select-option :value="3">mt</a-select-option>
                </a-select>
              </template>
            </a-input-number>
            <a-input  class="numipt2" :style="{width: '30px', background: '#fff', padding: 0, textAlign: 'center', fontSize: '20px'}"  disabled  v-model:value="formState.Capacity1"></a-input>
            <a-input-number
                            class="numipt3"
                            :min="0"
                            :max="100"
                            :formatter="value => `${value}%`"
                            :parser="value => value.replace('%', '')"
                            v-model:value="formState.upFloatValue"
            />
            <a-input  class="numipt4" :style="{width: '30px', background: '#fff', padding: 0, textAlign: 'center', fontSize: '20px'}"  disabled  v-model:value="formState.Capacity3"></a-input>
            <a-input-number
                            class="numipt5"
                            :min="0"
                            :max="100"
                            :formatter="value => `${value}%`"
                            :parser="value => value.replace('%', '')"
                            v-model:value="formState.downFloatValue"
            />
          </div>
          <a-dropdown placement="bottomLeft" v-else>
            <span @click="searchPostion(OCRInfo.loadingOrUnloadingCapacityValLoc.filedValue, OCRInfo.loadingOrUnloadingCapacityValLoc)">{{formState.loadingOrUnloadingCapacityStr}}
              <span v-for="item in unitareas" :key="item.label">
                <span v-if="item.value === formState.unit">{{item.label}}</span>
              </span>
            </span>
            <template #overlay>
              <a-menu>
                <a-menu-item>{{unitlData(formState.loadingOrUnloadingCapacityStr, 'm³')}}立方米</a-menu-item>
                <a-menu-item>{{unitlData(formState.loadingOrUnloadingCapacityStr, 'mt')}}万吨</a-menu-item>
                <a-menu-item>{{unitlData(formState.loadingOrUnloadingCapacityStr, 'mmbtu')}}百万英热</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </a-descriptions-item>
        <a-descriptions-item>
          <template v-slot:label>
            <span @click="searchPostion(OCRInfo.shipNameValLoc.name, OCRInfo.shipNameValLoc)" >船舶名称</span>
          </template>
          <a-input v-if="isEdit" v-model:value="formState.shipName" placeholder="请输入船舶名称"/>
          <span v-else @click="searchPostion(OCRInfo.shipNameValLoc.filedValue, OCRInfo.shipNameValLoc)">
            {{formState.shipName}}
          </span>
        </a-descriptions-item>
        <a-descriptions-item>
          <template v-slot:label>
            <span @click="searchPostion(OCRInfo.imoValLoc.name, OCRInfo.imoValLoc)" >IMO</span>
          </template>
          <a-input v-if="isEdit" v-model:value="formState.imo" placeholder="请输入IMO"/>
          <span v-else @click="searchPostion(OCRInfo.imoValLoc.filedValue, OCRInfo.imoValLoc)">{{formState.imo}}</span>
        </a-descriptions-item>
        <a-descriptions-item>
          <template v-slot:label>
            <span @click="searchPostion('changeShipTime')" >换船时间</span>
          </template>
          <a-date-picker v-if="isEdit" :style="{width: '100%'}" v-model:value="formState['changeShipTime']"  value-format="YYYY-MM-DD" />
          <a-dropdown placement="bottomLeft" v-else>
            <span @click="searchPostion(formState.changeShipTime)">{{formState.changeShipTime}}</span>
            <template #overlay>
              <a-menu>
                <a-menu-item>本地时间：{{formState.changeShipTime}}</a-menu-item>
                <a-menu-item>GMT时间：{{timeData(formState.changeShipTime, 'GMT')}}</a-menu-item>
                <a-menu-item>北京时间：{{timeData(formState.changeShipTime, 'beijin')}}</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </a-descriptions-item>
        <a-descriptions-item>
          <template v-slot:label>
            <span @click="searchPostion(OCRInfo.allowLoadingTimeValLoc.name, OCRInfo.allowLoadingTimeValLoc)" >允许装载时间</span>
          </template>
          <a-input-number v-if="isEdit" placeholder="请输入允许装载时间"  :style="{width: '100%'}" v-model:value="formState['allowLoadingTime']">
            <template #addonAfter>
              <div class="numAfter">小时</div>
            </template>
          </a-input-number>
          <a-dropdown placement="bottomLeft" v-else>
            <span @click="searchPostion(OCRInfo.allowLoadingTimeValLoc.filedValue, OCRInfo.allowLoadingTimeValLoc)">{{formState.allowLoadingTime?`${formState.allowLoadingTime}小时` : ''}}</span>
          </a-dropdown>
        </a-descriptions-item>
        <a-descriptions-item>
          <template v-slot:label>
            <span @click="searchPostion(OCRInfo.evaporationRateValLoc.name, OCRInfo.evaporationRateValLoc)" >蒸发率</span>
          </template>
          <a-input-number v-if="isEdit"
                          :min="0"
                          :max="100"
                          placeholder="请输入"
                          :style="{width: '100%'}"
                          v-model:value="formState.evaporationRate"
          >
            <template #addonAfter>
              <div class="numAfter">%</div>
            </template>
          </a-input-number>
          <span v-else @click="searchPostion(OCRInfo.evaporationRateValLoc.filedValue, OCRInfo.evaporationRateValLoc)"> {{formState.evaporationRateStr}}</span>
        </a-descriptions-item>
        <a-descriptions-item>
          <template v-slot:label>
            <span @click="searchPostion(OCRInfo.demurrageRateValLoc.name, OCRInfo.demurrageRateValLoc)" >滞期费率</span>
          </template>
          <a-input-number v-if="isEdit"
                          placeholder="请输入"
                          :style="{width: '100%'}"
                          v-model:value="formState.demurrageRate"
          >
            <template #addonAfter>
              <a-select  style="width: 100px" v-model:value="formState.currency">
                <a-select-option :value="1">美元</a-select-option>
                <a-select-option :value="2">人民币</a-select-option>
                <a-select-option :value="3">欧元</a-select-option>
              </a-select>
            </template>
          </a-input-number>
          <a-dropdown placement="bottomLeft" v-else>
            <div v-if="formState.demurrageRate">
              <span @click="searchPostion(OCRInfo.demurrageRateValLoc.filedValue, OCRInfo.demurrageRateValLoc)">{{formState.demurrageRateStr}}
              </span>
            </div>
            <template #overlay>
              <a-menu>
                <a-menu-item>人民币：{{formState.demurrageRate}}</a-menu-item>
                <a-menu-item>美元：{{formState.demurrageRate}}</a-menu-item>
                <a-menu-item>欧元：{{formState.demurrageRate}}</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </a-descriptions-item>
        <a-descriptions-item>
          <template v-slot:label>
            <span @click="searchPostion('contractPrice')" >合同价格</span>
          </template>
          <a-input-number v-if="isEdit" v-model:value="formState.contractPrice" :style="{width: '100%'}" placeholder="请输入合同价格"
                          :min="1" >
            <template #addonAfter>
              <a-select  style="width: 100px" v-model:value="formState.currency">
                <a-select-option :value="1">美元</a-select-option>
                <a-select-option :value="2">人民币</a-select-option>
                <a-select-option :value="3">欧元</a-select-option>
              </a-select>
            </template>
          </a-input-number>
          <a-dropdown placement="bottomLeft" v-else>
            <div v-if="formState.contractPrice">
              <span @click="searchPostion(formState.contractPrice)">{{formState.contractPriceStr}}</span>
            </div>
            <template #overlay>
              <a-menu>
                <a-menu-item>人民币：{{formState.contractPrice}}</a-menu-item>
                <a-menu-item>美元：{{formState.contractPrice}}</a-menu-item>
                <a-menu-item>欧元：{{formState.contractPrice}}</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </a-descriptions-item>
        <a-descriptions-item>
          <template v-slot:label>
            <span @click="searchPostion(OCRInfo.measurementClauseValLoc.name, OCRInfo.measurementClauseValLoc)" >计量条款</span>
          </template>
          <a-input v-if="isEdit" v-model:value="formState.measurementClause"  placeholder="请输入计量条款"></a-input>
          <span v-else @click="searchPostion(OCRInfo.measurementClauseValLoc.filedValue, OCRInfo.measurementClauseValLoc)" > {{formState.measurementClause}}</span>
        </a-descriptions-item>
        <a-descriptions-item label="合同状态">
          <a-select v-if="isEdit" :style="{width: '100%'}"
                    v-model:value="formState.status" placeholder="请选择合同状态"
                    :options="contractType" />
          <span v-else>
            <span v-for="item in contractType" :key="item.label">
              <span v-if="item.value === formState.status">{{item.label}}</span>
            </span>
            </span>
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
          <span>{{formState.createDate}}</span>
        </a-descriptions-item>
        <a-descriptions-item label="创建者">
          <span>{{formState.createBy}}</span>
        </a-descriptions-item>
      </a-descriptions>
    </div>
<!--  合同原件上传   -->
    <a-modal v-model:visible="fileVisible" :width="600" title="补充合同原件"  @ok="handleFileChange">
      <a-form :model="suppFileForm" labelAlign="left">
        <a-form-item name="dragger" no-style>
          <a-upload-dragger
              v-model:fileList="contractFileList"
              :action="fileAction"
              :beforeUpload="fileBeforeUpload"
              @change="postSuppFile"
              name="file"
              accept=".pdf"
          >
            <div class="dragger-img">
              <img src="@/assets/images/ResourceContract/file.png" alt="">
            </div>
            <p class="ant-upload-text" :style="{color: '#2C3749',fontSize: '14px'}">将文件拖到此处，或 <span :style="{color: '#0062AD'}">点击上传</span> </p>
            <p class="ant-upload-hint" :style="{color: '#6B7A8B', fontSize: '12px'}" >支持pdf</p>
          </a-upload-dragger>
        </a-form-item>
      </a-form>
      <template #footer>
        <div class="from-btn-right">
          <a-button key="back" class="border-btn" @click="colseFileModel">取消</a-button>
          <a-button key="submit" @click="handleFileChange" class="search-btn1">保存</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import {defineEmits, defineProps, getCurrentInstance, reactive, ref, watch} from "vue";
import { EditOutlined, UploadOutlined } from '@ant-design/icons-vue';
import {message} from "ant-design-vue";
import {BASE_URL} from "@/config/proxyIp";
const { proxy  } = getCurrentInstance()
const emit = defineEmits(['searchTxt', 'saveEdit'])
const isEdit = ref(false)
const isSave = ref(false)
const props = defineProps({
  dataObj: {
    type: Object,
    required: true,
    default: () =>  {}
  },
  isEdits: {
    type: Boolean,
    required: true,
    default: () =>  false
  },
  isSaves: {
    type: Boolean,
    required: true,
    default: () =>  false
  }
})

// 贸易类型
const areas = ref([
  {
    label: '长协',
    value: 1
  },
  {
    label: '中期',
    value: 2
  },
  {
    label: '现货',
    value: 3
  }
])
// 贸易模式
const modelAreas = ref([
  {
    label: '采购',
    value: 1
  },
  {
    label: '销售',
    value: 2
  },
  {
    label: '返装销售',
    value: 3
  },
])
// 贸易主体
const tradeareas = ref([
  {
    label: '国贸',
    value: 1
  },
  {
    label: '新贸',
    value: 2
  },
])
// 价格单位
const moneyAreas = ref([
  {
    label: '美元',
    value: 1
  },
  {
    label: '人民币',
    value: 2
  },
  {
    label: '欧元',
    value: 3
  },
])
//交货方式
const wayareas = ref([
  {
    label: 'FOB',
    value: 1
  },
  {
    label: 'DES',
    value: 2
  },
])
// 装载量的单位
const unitareas = ref([
  {
    label: 'MMBtu',
    value: 1
  },
  {
    label: 'm³',
    value: 2
  },
  {
    label: 'MT',
    value: 3
  },
])
// 合同状态
const contractType = ref([
  {
    label: '草稿',
    value: 1,
  },
  {
    label: '已签订',
    value: 2,
  },
  {
    label: '执行中',
    value: 3,
  },
  {
    label: '已完成',
    value: 4,
  },
  {
    label: '暂停中',
    value: 5,
  }
])
const areas2 = ref([
  {
    label: '+',
    value: '+'
  },
  {
    label: '-',
    value: '-'
  },
  // {
  //   label: '±',
  //   value: '±'
  // }
])
const formState = reactive({
  mainContractName: '', //关联主合同名称
  mainContract: undefined, //关联主合同ID
  tradeType: undefined, // 贸易类型
  tradeBody: undefined, //贸易主体
  signingDate: '', // 签订日期
  buyer: '', //买方
  seller: '', // 卖方
  deliveryType: undefined, //交货方式
  loadingPort: '', //装货港口
  deliveryWindowBegin: '', // 交付窗口开始
  deliveryWindowEnd: '', // 交付窗口结束
  deliveryWindow: '', // 交付窗口
  unLoadingPort: '', // 卸载窗口
  contractPrice: '', //合同价格
  allowLoadingTime: '', //装载窗口时间
  evaporationRate: '', //蒸发率
  demurrageRate: '', //滞期费率(每天)
  filePath: '', // 合同文件地址
  shipName: '', //船名
  imo: '', //IMO
  deliveryWindows: [], //交付窗口
  measurementClause: '', //计量条款
  changeShipTime: '',
  changePortTimeUnloading: '',
  changePortTimeLoading: '',
  tradeModel: '',
  loadingOrUnloadingCapacity: '', //合同装卸载量值
  unit: 1, // 装卸载量单位
  upFloatValue: '', //上浮值
  downFloatValue: '', // 下浮值
  Capacity1: '+',
  Capacity3: '-',
  loadingOrUnloadingCapacityStr : '', //合同装载量展示的值
  id: '',
  status: ''
})
watch(() => props.dataObj, (newVal) => {
  console.log('传过来的详情更新了没', newVal)
  Object.assign(formState, newVal)
  formState.deliveryWindows = [formState.deliveryWindowBegin, formState.deliveryWindowEnd]
  formState.mainContract = formState.mainContract? formState.mainContract.toString() : ''
  getAll()
  getOcr()
})
watch(() => props.isSaves, (newVal) => {
  isSave.value = newVal
  if (newVal) {
    saveClick()
  }
},
    {
      deep:  true
    }
)
watch(() => props.isEdits, (newVal) => {
  isEdit.value = newVal
}, {
  deep:  true
})
const labelStyle = ref({
  color: '#6B7A8B'
})
// const editClick = () => {
//   isEdit.value = true
//   isSave.value = false
// }
const saveClick = () => {
  formState.deliveryWindowBegin = formState.deliveryWindows[0]
  formState.deliveryWindowEnd = formState.deliveryWindows[1]
  proxy.$api.putMemorandum(formState).then(res => {
    if (res.resultCode === 0) {
      isEdit.value = false
      isSave.value = true
      message.success('修改成功')
      emit('saveEdit', isSave.value)
    }
  })
}
// 合同状态更改
watch(() => formState.status, (val) => {
  if (val > 1) {
    contractType.value.map(item => {
      if (item.value === 1) {
        Object.assign(item, {
          disabled: true
        })
      }
    })
  }
  if (val === 4 && formState.tradeType === 3) {
    contractType.value.map(item => {
      if (item.value === 1) {
        Object.assign(item, {
          disabled: true
        })
      }
      if (item.value === 2) {
        Object.assign(item, {
          disabled: true
        })
      }
      if (item.value === 3) {
        Object.assign(item, {
          disabled: true
        })
      }
      if (item.value === 5) {
        Object.assign(item, {
          disabled: true
        })
      }
    })
  }
  if (val === 4 && formState.tradeType !== 3) {
    contractType.value.map(item => {
      if (item.value === 1) {
        Object.assign(item, {
          disabled: true
        })
      }
      if (item.value === 2) {
        Object.assign(item, {
          disabled: true
        })
      }
      if (item.value === 3) {
        Object.assign(item, {
          disabled: false
        })
      }
      if (item.value === 5) {
        Object.assign(item, {
          disabled: true
        })
      }
    })

  }
})
// const cancelClick = () => {
//   isEdit.value = false
//   isSave.value = true
// }
/**
 * 搜索的定位
 * **/
const searchPostion = (txt, location) => {
  console.log('要搜索的文字', txt, location)
  let obj = {
    txt: txt,
    loc: location
  }
  emit('searchTxt', obj)
}
/**
 * 时间转换
 * */
const timeData = (value, type) => {
  let a1 = new Date(new Date(value) + new Date(value).getTimezoneOffset()).toLocaleString()
  let a2 = new Date(new Date(value).getTime()+(parseInt(new Date(value).getTimezoneOffset()/60) + 8)*3600*1000)
  if (type === 'GMT') {
    return a1
  } else {
    return a2.toLocaleString()
  }
}
/**
 * 单位换算
 * */
const unitlData = (value, type) => {
  let reg1 = new RegExp(",","g"); // 加'g'，删除字符串里所有的"a"
  let a1 = value.replace(reg1,"");
  let newVal = ''
  if (a1.indexOf('±')) {
    newVal = formState.loadingOrUnloadingCapacity + formState.Capacity1 +  formState.upFloatValue + formState.Capacity3 + formState.downFloatValue
  } else {
    newVal = a1
  }
 let {first, lastStr} = spliString(newVal, '+')
  let test1 = first
  let test2 = lastStr
  let frist1 = ''
  let frist2 = ''
  let last1 = ''
  let last2 = ''
  if (test1.includes('+')) {
    let {first, lastStr} =  spliString(test1, '+')
    frist1 = first
    frist2 = lastStr
  } else if (test1.includes('-')) {
    let {first, lastStr} =  spliString(test1, '-')
    frist1 = first
    frist2 = lastStr
  } else if (test2.includes('+')) {
    let {first, lastStr} =  spliString(test2, '+')
    last1 = first
    last2 = lastStr
  }else if (test2.includes('-')) {
    let {first, lastStr} =  spliString(test2, '-')
    last1 = first
    last2 = lastStr
  }
  if (!test1.includes('+') && !test1.includes('-')) {
    let num1 = last1.split('%')[0]
    let num2 = num1 / 100
    let numL = last2.split('%')[0]
    let numLM = numL / 100
    if (test2.includes('+')) {
      let testLast = Number(test1) - Number(test1) * num2
      let lastVal = Number(test1) + Number(test1) * numLM
      if (type === 'mmbtu') {
        return `${testLast} - ${lastVal}`
      } else if (type === 'm³') {
        const mVal = `${(testLast/ 22.5).toFixed(2)} - ${(lastVal/ 22.5).toFixed(2)}`
        return mVal
      } else if (type === 'mt') {
        const mtVal = `${((testLast/ 22.5)/0.475).toFixed(2)} - ${((lastVal/ 22.5)/0.475).toFixed(2)}`
        return mtVal
      }
      console.log('testLast',testLast,  lastVal)
    } else if (test2.includes('-')) {
      let testLast = Number(test1) - Number(test1) * num2
      let lastVal = Number(test1) - Number(test1) * numLM
      if (testLast < lastVal) {
        if (type === 'mmbtu') {
          return `${testLast} - ${lastVal}`
        } else if (type === 'm³') {
          const mVal = `${(testLast/ 22.5).toFixed(2)} - ${(lastVal/ 22.5).toFixed(2)}`
          return mVal
        } else if (type === 'mt') {
          const mtVal = `${((testLast/ 22.5)/0.475).toFixed(2)} - ${((lastVal/ 22.5)/0.475).toFixed(2)}`
          return mtVal
        }
      } else {
        if (type === 'mmbtu') {
          return `${lastVal} - ${testLast}`
        } else if (type === 'm³') {
          const mVal = `${(lastVal/ 22.5).toFixed(2)} - ${(testLast/ 22.5).toFixed(2)}`
          return mVal
        } else if (type === 'mt') {
          const mtVal = `${((lastVal/ 22.5)/0.475).toFixed(2)} - ${((testLast/ 22.5)/0.475).toFixed(2)}`
          return mtVal
        }
      }
    }
  } else {
    let num1 = frist2.split('%')[0]
    let num2 = num1 / 100
    let numL = test2.split('%')[0]
    let numLM = numL / 100
    if (test1.includes('+')) {
      let testLast = Number(frist1) + Number(frist1) * num2 + Number(frist1) * numLM
      if (type === 'mmbtu') {
        return `${testLast}`
      } else if (type === 'm³') {
        const mVal = `${(testLast/ 22.5).toFixed(2)}`
        return mVal
      } else if (type === 'mt') {
        const mtVal = `${((testLast/ 22.5)/0.475).toFixed(2)}`
        return mtVal
      }
    } else if (test1.includes('-')) {
      let testLast = Number(frist1) + Number(frist1) * num2
      let lastVal = Number(frist1) + Number(frist1) * numLM
      if (type === 'mmbtu') {
        return `${testLast} - ${lastVal}`
      } else if (type === 'm³') {
        const mVal = `${(testLast/ 22.5).toFixed(2)} - ${(lastVal/ 22.5).toFixed(2)}`
        return mVal
      } else if (type === 'mt') {
        const mtVal = `${((testLast/ 22.5)/0.475).toFixed(2)} - ${((lastVal/ 22.5)/0.475).toFixed(2)}`
        return mtVal
      }
    }
  }
}
/**
 * 截取字符串的位置
 * */
const spliString = (str, sym) => {
  let index = str.lastIndexOf(`${sym}`)
  let first =  str.substring(0, index)
  let lastStr = str.substring(index + 1, str.length)
  return {
    first,
    lastStr
  }
}
/**
 * 查询所有主合同
 * */
const allMainData = ref([])
const getAll = () => {
  proxy.$api.getAllMainList().then(res => {
    console.log('所有的主合同', res)
    allMainData.value = res.resultObject
    allMainData.value.map((item) => {
      Object.assign(item, {
        id: item.id.toString()
      })
    })
  })
}
/**
 * 补充合同原件
 * */
const contractFileList = ref([])
const fileAction = ref(`${BASE_URL}/con/common/upload`)
const fileVisible = ref(false)
const suppFileForm = reactive({
  conId: formState.id.toString(),
  url: ''
})
const colseFileModel = () => {
  fileVisible.value = false
}
const showFileModel = () => {
  fileVisible.value = true
  contractFileList.value = []
}
const postSuppFile = (info) => {
  const status = info.file.status
  if (status === 'done') {
    suppFileForm.url = info.file.response.resultObject
  } else if (status === 'error') {
    message.error(`${info.file.name} 文件上传失败`);
  }
}
const fileBeforeUpload = (file) => {
  let houzui = file.name.substring(file.name.lastIndexOf('.'), file.name.length).toLowerCase()
  let res = ['.pdf'].includes(houzui)
  if (!res) {
    contractFileList.value = []
    message.error('请上传PDF文件')
  }
  return res
}
const handleFileChange = () => {
  Object.assign(suppFileForm, {
    conId: formState.id.toString()
  })
  proxy.$api.supppleContract(suppFileForm).then(res => {
    if (res.resultCode === 0) {
      fileVisible.value = false
      isSave.value = true
      message.success('合同原件上传成功')
      emit('saveEdit', isSave.value)
    }
  })
}
/**
 * 获取OCR信息
 * */
const OCRInfo = ref({})
const getOcr = () => {
  proxy.$api.getOcrInfo({id: formState.id}).then(res => {
    console.log('OCR的信息', res)
    OCRInfo.value = res.resultObject
  })
}
import { useRouter } from "vue-router"
const router = useRouter()
const goMain = (id) => {
  router.push({
    path: '/AContractInfo',
    query: {
      tab: '2',
      id: id
    },
  })
}
</script>

<style lang="scss" scoped>
.numipt1 {
  width: 46%;
}
.numipt2 {
  width: 30px;
  margin: 0 2px;
}
.numipt3 {
  width: 53px;
  padding-top: 2px;
}
.numipt4 {
  width: 30px;
  margin: 0 2px;
}
.numipt5 {
  width: 53px;
  padding-top: 2px;
}
@media (min-width: 1440px) {
  .numipt1 {
    width: 51%;
  }
  .numipt3 {
    padding-top: 2px;
  }
  .numipt5 {
    padding-top: 2px;
  }
}
@media (min-width: 1680px) {
  .numipt1 {
    width: 62%;
  }
  .numipt3 {
    padding-top: 2px;
  }
  .numipt5 {
    padding-top: 2px;
  }
}
@media (min-width: 1920px) {
  .numipt1 {
    width: 71.5%;
  }
  .numipt3 {
    padding-top: 3px;
  }
  .numipt5 {
    padding-top: 3px;
  }
}
@media (min-width: 2300px) {
  .numipt1 {
    width: 76%;
  }
  .numipt3 {
    padding-top: 3px;
  }
  .numipt5 {
    padding-top: 3px;
  }
}
</style>
